<template>
  <div>
    <!-- 头部 -->
    <user-header :headerData="headerData" @show="_show_qrcode()"></user-header>
    <!-- 导航 -->
    <user-nav :current="3" :memberData="memberData"></user-nav>
    <!-- 提现 -->
    <div class="accountPanel-links">
      <section class="accountPanel" v-if="is_store_commission_hidden">
        <div class="iner-bor">
          <!-- <div @click="Jump('commissionContent')"> -->
          <div>
            <div class="item fl">
              <!-- <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(remaining_commission)">{{remaining_commission}}</i> -->
              <i class="fontAliBaba" v-if="parseFloat(remaining_commission)" v-html="scaleGoodsPriceNoMarkFn(remaining_commission)"></i>
              <i class="fontAliBaba price-scale " v-else><span class="num-font">{{remaining_commission}}</span></i>
              <p>{{memberData.ftitle_commission_left}}</p>
            </div>
            <div class="item fl">
              <!-- <i class="fontAliBaba" v-html="scaleGoodsPriceNoMarkFn(wait_commission)">{{wait_commission}}</i> -->
              <i class="fontAliBaba" v-if="parseFloat(wait_commission)" v-html="scaleGoodsPriceNoMarkFn(wait_commission)"></i>
              <i class="fontAliBaba price-scale" v-else><span class="num-font">{{wait_commission}}</span></i>
              <p>待收益</p>
            </div>
          </div>
          <span @click="Jump('myCommission','fxs')" class="fr btn-sign">
            <!-- <i></i> -->
            提现
          </span>
        </div>
        <div class="line-bor"></div>
      </section>
      <div class="style2-links clearfix">
        <div @click="Jump('storeGoods')" class="link" v-if="show_md_product">
          <span class="num fontAliBaba">{{store_goods_count}}</span>
          <span class="title">{{ftitle_store_goods}}</span>
        </div>
        <div @click="Jump('storeLevelAgent')" class="link" v-if="show_md_fxs">
          <span class="num fontAliBaba">{{next_lever_agent_count}}</span>
          <span class="title">{{ftitle_agents}}</span>
        </div>
        <div @click="Jump('storeLevelUser')" class="link" v-if="show_md_user">
          <span class="num fontAliBaba">{{store_user_count}}</span>
          <span class="title">{{ftitle_store_user}}</span>
        </div>
        <div @click="Jump('storeOrder')" class="link" v-if="show_md_purchase_order">
          <span class="num fontAliBaba">{{fenxiao_order_count}}</span>
          <span class="title">团队订单</span>
        </div>
      </div>
    </div>
    <!-- 定制 -->
    <div class='query-box' v-if="is_store_serve_award == 1">
      <div class='top-box'>
        <h2 class='title'>门店服务奖</h2>
        <div class='header-box'>
          <span :class="select==1?'select':''" @click="getMoney(1)">今日</span>
          <span :class="select==-1?'select':''" @click="getMoney(-1)">昨日</span>
          <span :class="select==7?'select':''" @click="getMoney(7)">7天</span>
          <span :class="select==30?'select':''" @click="getMoney(30)">30天</span>
          <span :class="select==99?'select':''" @click="getMoney(99)">全部</span>
        </div>
      </div>
      <div  class='get-box'>
        <div class='getMoney'>
          <p class='title'>已收益</p>
          <p class='money'>{{geted}}</p>
        </div>
        <div class='getMoney'>
          <p class='title'>待收益</p>
          <p class='money'>{{noget}}</p>
        </div>
      </div>
    </div>
    <!-- 我的服务 -->
    <!-- TODO 小程序 -->
    <template>
      <store-index :storeInfo="storeInfo" v-if="template_style == 1" @showQrcode="_show_qrcode()"></store-index>
      <store-index2 :storeInfo="storeInfo" v-else-if="template_style == 2" @showQrcode="_show_qrcode()"></store-index2>
    </template>
    <van-popup v-model="is_show_qrcode" class="code-pop">
      <img :src="qrcode_url" alt @longpress="saveCodeImage(qrcode_url)"/>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import userNav from '@/views/user/components/nav/index'
import userHeader from '@/views/user/components/header/index'
import storeIndex from '@/views/user/storeCenter/components/storeIndex/index'
import storeIndex2 from '@/views/user/storeCenter/components/storeIndex2/index'

// import bg_img from 'https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png'
// import avatar from 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg'
// import ad_img from '@img/user/ad.png'
import { getStoreCenter, ServiceAwardCount } from '@/api/user/store/storeApi'
import { getCommissionIncome } from '@/api/user/user'
import { scaleGoodsPriceNoMark } from '@/utils/index.js'
import small from '@/smallapp/small'

import Vue from 'vue'
import { Popup } from 'vant'

Vue.use(Popup)

export default Vue.extend({
  data() {
    return {
      template_style: '',
      headerData: {
        bgImg: 'https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png',
        userImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
        nickname: '',
        mobile: '',
        show_level: true,
        rank_name: '',
        end_time: '',
        letterCount: 0,
        show_qrcode: true
      },
      select: 1,
      memberData: {},
      storeInfo: {},
      geted: '',
      noget: '',
      is_sycx_dz: false,
      remaining_commission: '--',
      wait_commission: '--',
      show_md_product: true,
      ftitle_store_goods: '',
      store_goods_count: 0,
      show_md_fxs: true,
      ftitle_agents: '',
      next_lever_agent_count: 0,
      show_md_user: true,
      ftitle_store_user: '',
      store_user_count: 0,
      show_md_purchase_order: true,
      ftitle_fx_order: '',
      fenxiao_order_count: 0,
      is_store_serve_award: 0,
      qrcode_url: '',
      is_show_qrcode: false,
      is_store_commission_hidden: false
    }
  },
  created() {
    this.getServiceAwardCount(1)
    this.init()
  },
  methods: {
    init() {
      this.$loadingWrap.show()
      const shop = small.globalData.shopId
      const is_sycx_dz = this.$_shop('$_sycx_dz', shop)
      this.is_sycx_dz = is_sycx_dz
      // console.log('is_sycx_dz',is_sycx_dz)
      getStoreCenter().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
            wx.setNavigationBarTitle({
              title: res.data.common_center_parameter.store_name
            })
          // TODO 小程序处理 wxConfig.template_style
            resData.template_style ? this.template_style = resData.template_style : ''

          // 导航数据
          this.memberData = Object.assign(resData.common_center_parameter, resData.common_center_renovation_parameter)
          this.memberData.user_type = resData.user_identity.user_type
          this.memberData.is_agent = resData.user_identity.is_agent
          this.memberData.is_show_distributor = resData.is_show_distributor
          this.memberData.system_function_model = resData.system_function_model
          this.memberData.is_check_dhs = resData.is_check_dhs
          this.memberData.is_show_dhs = resData.is_show_dhs
          this.memberData.is_wx = resData.is_wx
          this.memberData.is_app = resData.is_app
          this.memberData.is_show_agent = resData.is_show_agent
          this.memberData.is_show_gys = resData.is_show_gys
          this.memberData.supplier_flag = resData.supplier_flag
          this.memberData.is_tgy = resData.is_tgy
          this.memberData.is_dls = resData.is_dls
          this.memberData.ftitle_gys_center = resData.ftitle_gys_center
          this.is_store_commission_hidden = resData.is_store_commission_hidden
          // x+1 链动中心 start
          this.memberData.is_chaining = resData.is_chaining || 0
          this.memberData.is_show_chaining = resData.is_show_chaining
          // x+1 链动中心 end
          // 复制中心 start
          this.memberData.has_replicate_rank = resData.has_replicate_rank || 0
          this.memberData.is_show_replicate_center = resData.is_show_replicate_center
          // 复制中心 end
          //  头部数据
          if (resData.top_bg != '') {
            this.headerData.bgImg = resData.top_bg
          }
          this.headerData.userImg = resData.avatar
          this.headerData.nickname = resData.user_info.nickname
          this.headerData.mobile = resData.user_info.mobile
          this.headerData.show_level = resData.show_level
          this.headerData.rank_name = resData.store_rank_name
          this.headerData.letterCount = resData.letterCount
          this.headerData.show_qrcode = resData.show_qrcode
          this.qrcode_url = resData.qrcode_url
          //  link数据
          // this.remaining_commission = resData.user_info.remaining_commission
          // this.wait_commission = resData.wait_commission

          this.show_md_product = resData.show_md_product
          this.ftitle_store_goods = resData.ftitle_store_goods
          this.store_goods_count = resData.store_goods_count

          this.show_md_fxs = resData.show_md_fxs
          this.ftitle_agents = resData.ftitle_agents
          this.next_lever_agent_count = resData.next_lever_agent_count

          this.show_md_user = resData.show_md_user
          this.ftitle_store_user = resData.ftitle_store_user
          this.store_user_count = resData.store_user_count

          this.show_md_purchase_order = resData.show_md_purchase_order
          this.ftitle_fx_order = resData.ftitle_fx_order
          this.fenxiao_order_count = resData.fenxiao_order_count
          // 图标数据
          this.storeInfo = resData
          this.storeInfo.superior_user_id = resData.user_info.superior_user_id

          // 是否展示门店服务奖励
          this.is_store_serve_award = resData.is_store_serve_award
        } else {
          this.$Error(res.msg)
        }
      })
      getCommissionIncome().then(res => {
        if (res.status == 1) {
          this.remaining_commission = res.data.remaining_commission
          this.wait_commission = res.data.wait_commission
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 展示二维码
    _show_qrcode() {
      this.is_show_qrcode = !this.is_show_qrcode
    },
    saveCodeImage(url) {
      small.saveImage(url)
    },
    // 获取收益
    getServiceAwardCount(t) {
      const data = { time: t }
      ServiceAwardCount(data).then(res => {
        this.$loadingWrap.close()
        // console.log(res, 11111)
        this.geted = res.data.has_use_count
        this.noget = res.data.not_use_count
      })
    },
    Jump(url, type) {
      const data = { type }
      this.$JumpPath(this, url, data)
    },
    scaleGoodsPriceNoMarkFn(price) {
      return scaleGoodsPriceNoMark(price)
    },
    getMoney(index) {
      this.select = index
      this.getServiceAwardCount(index)
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  components: {
    userNav,
    userHeader,
    storeIndex,
    storeIndex2
  }
})
</script>

<style lang="scss">
@import 'src/styles/user/index.scss';
</style>
